<template>
  <div class="song_play">
    <Header title="音乐播放" go-back="true"></Header>
    <div class="play_box">
      <div class="song_name">
        <p>{{songName}}</p>
        <p>{{singer}}</p>
      </div>
      <div class="middle">
        <div class="middle-l" ref="middleL">
          <div class="cd-wrapper" ref="cdWrapper">
            <!--cd唱片旋转-->
            <div :class="['unrotate', playing ? 'rotate': '']">
              <div class="cd">
                <img class="image" ref="imgs" :src="songCover">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lyric_btn">
        <!--<span @click="$router.push('/songLyric')">歌&nbsp;&nbsp;词</span>-->
        <div class="c">
          <div class="tc font30 mb15">{{g}}</div>
        </div>
      </div>
      <div class="audio_box" @click="playBtn()">
        <audio id="audio" ref="audio" :src="songArray" controls></audio>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import {getSongUrl} from '../../../api/node'
import {loadSongId, loadLyricWord, loadSongUrl, loadSingerName, loadSongName} from '../../../api/storage'

export default {
  name: 'songPay',
  data () {
    return {
      songArray: '',
      songName: loadSongName(),
      singer: loadSingerName(),
      songId: '',
      songCover: loadSongUrl(), // cd唱片封面
      playing: false,
      songText: '', // 歌词
      lrcObj: null,
      g: '',
      word: ''
    }
  },
  computed: {
  },
  mounted () {
    this.p = document.querySelector('#audio')
    let _this = this
    this.lrcObj = this.parseLyric()
    // console.log(this.lrcObj)
    this.p.addEventListener('timeupdate', function () {
      let obj = _this.lrcObj[Math.floor(this.currentTime)]
      if (obj !== undefined) {
        _this.g = obj
      }
    })
    this.height = window.innerHeight + 'px'
    window.onresize = () => {
      _this.height = window.innerHeight + 'px'
    }
  },
  created () {
    getSongUrl(loadSongId()).then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.songArray = res.data[0].url
        // console.log(this.songArray)
      }
    })
  },
  beforeUpdate () {
  },
  methods: {
    playBtn () {
      var audio = document.querySelector('#audio')
      !this.playing ? '' : audio.play()
      this.playing = !this.playing
    },
    // 歌词处理方法
    parseLyric () {
      var lyrics = loadLyricWord()
      var lrcObj = {}
      for (var i = 0; i < lyrics.length; i++) {
        var lyric = decodeURIComponent(lyrics[i])
        var timeReg = /\[\d*:\d*(\.\d*)*\]/g
        var timeRegExpArr = lyric.match(timeReg)
        if (!timeRegExpArr) continue
        var clause = lyric.replace(timeReg, '')
        for (var k = 0, h = timeRegExpArr.length; k < h; k++) {
          var t = timeRegExpArr[k]
          var min = Number(String(t.match(/\[\d*/i)).slice(1)),
            sec = Number(String(t.match(/\:\d*/i)).slice(1))
          var time = min * 60 + sec
          lrcObj[time] = clause // 对应时间播放对应歌词
        }
      }
      return lrcObj
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
  .song_play {
    width: 100%;
    height: 626px;
    padding-top: 100px;
    background: url("../../../assets/Image/playBg.png") no-repeat;
    background-size: 100% 100%;
    @-webkit-keyframes rotating {
      from {
        -webkit-transform: rotate(0)
      }
      to {
        -webkit-transform: rotate(360deg)
      }
    }

    @keyframes rotating {
      from {
        transform: rotate(0)
      }
      to {
        transform: rotate(360deg)
      }
    }
    @-moz-keyframes rotating {
      from {
        -moz-transform: rotate(0)
      }
      to {
        -moz-transform: rotate(360deg)
      }
    }
    .play_box {
      width: 100%;
      height: 100%;
      /*background: url("../../../assets/Image/playBg.png") no-repeat;*/
      /*background-size: 100% 100%;*/
      .song_name {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        p:first-child {
          color: #fff;
          font-size: 20px;
          line-height: 30px;
        }
        p:last-child {
          color: #fff;
          font-size: 13px;
          line-height: 30px;
        }
      }
      .middle {
        position: fixed;
        width: 100%;
        top: 150px;
        bottom: 170px;
        white-space: nowrap;
        font-size: 0;
        .middle-l {
          display: inline-block;
          vertical-align: top;
          position: relative;
          width: 100%;
          height: 0;
          padding-top: 80%;
          .cd-wrapper {
            position: absolute;
            left: 20%;
            top: 80px;
            width: 60%;
            height: 75%;
            .cd {
              width: 100%;
              height: 100%;
              /*box-sizing: border-box;*/
              /*border: 10px solid rgba(255, 255, 255, 0.1);*/
              /*border-radius: 50%;*/
              &.play {
                animation: rotate 20s linear infinite;
              }
              &.pause {
                animation-play-state: paused;
              }
              .image {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
          .rotate {
            width: 100%;
            height: 100%;
            -webkit-animation: rotating 2s linear infinite;
            -moz-animation: rotating 2s linear infinite;
            -o-animation: rotating 2s linear infinite;
            animation: rotating 2s linear infinite;
          }
          .unrotate {
            width: 100%;
            height: 100%;
          }
        }
      }
      .lyric_btn{
        width: 100%;
        position: absolute;
        height: 130px;
        bottom: 56px;
        text-align: center;
        .c{
          color: #927712;
          .tc{
            text-align: center;
            margin:0 auto;
          }
          .mb15{
            margin-bottom: 15px;
          }
          .font40{
            font-size: 14px;
          }
          .font30{
            font-size: 13px;
          }
        }
        span{
          color: #fff;
          font-size: 15px;
          padding: 20px;
        }
      }
      .audio_box {
        /*width: 100%;*/
        position: absolute;
        bottom: 80px;
        left: 40px;
      }
    }
  }
</style>
